●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Search input with live filtering (@bind oninput).
- Responsive table list of event types with loading and empty states.
- Row actions: Preview, Link, More (button) and a global New button.
- Icons for public/private state and action affordances (Font Awesome classes present).
## Key components
- HTML input (type="text") bound via `@bind` and `@bind:event="oninput"`
- `table` element with `foreach` rendering rows
- `OnInitializedAsync` for initial data population (simulated delay)
- `FilteredEventTypes` computed property for filtering
- Event handlers: `HandleNewEvent`, `HandlePreview`, `HandleLink`, `HandleMoreOptions`
- Plain POCO model: `EventTypeModel`
- Simple loading spinner markup and no-results message
## How it works
- Sample data is created in `OnInitializedAsync` (simulated API call using `Task.Delay`).
- The search box updates `SearchTerm` via `@bind` on input; `FilteredEventTypes` returns filtered results using `StringComparison.OrdinalIgnoreCase` on Name, Slug, and Duration.
- UI interactions call local handler methods that currently log to console; navigation, modals, clipboard, or API calls are left as placeholders.
- Rows render different icons and text based on `eventType.IsPublic`.
## Styling
- Layout and spacing use Tailwind utility classes (`p-4`, `max-w-4xl`, `flex`, `rounded-lg`, `bg-gray-100`).
- Table uses Tailwind-like classes for typography and spacing; responsiveness is handled via overflow container (`overflow-x-auto`).
- The markup includes Font Awesome icon classes (`fas`) and a `spinner-border` class (spinner markup appears Bootstrap-like or custom), so include Font Awesome and spinner CSS or replace with a Tailwind-compatible spinner.
## Reuse steps
1. Add the Razor page and `EventTypeModel` to a Blazor project.
2. Ensure Tailwind CSS is available (project Tailwind setup or a prototype CDN) and include Font Awesome or substitute icons.
3. Replace the sample data in `OnInitializedAsync` with an injected data service (register service in Program.cs and inject it into the page).
4. Wire navigation, modals, or clipboard via `NavigationManager`, MudBlazor/Dialog, or JS interop as needed.
5. Add paging, sorting, and server-side filtering if the dataset can be large.
## Limitations & next steps
- This is a single page scaffold generated by Instruct UI; data access, authentication, and persistence are not implemented.
- Action handlers are placeholders and require wiring to navigation, modals, APIs, or clipboard logic.
- No form validation, edit/create flows, or delete confirmation dialogs are provided.
- Consider adding accessibility attributes, keyboard support, pagination, sorting, and tests before production use.